import { Collapse, Tag, List } from 'antd-mobile'
import styles from '../css/detail.module.css'
import { useNavigate, useSearchParams } from 'react-router-dom'

function TicketCollapse(props) {
  const seatType = ['ssoftSeat', 'fsoftSeat', 'businessSeat']
  const seatTypeCN = ['二等座', '一等座', '商务座']
  const nav = useNavigate()
  const [sp] = useSearchParams()

  // 点击买票按钮，跳转到订单填写页面
  const gotoOrder = (seatType, price) => {
    // nav('路径', { state: 车次详情对象 })
    nav(`/order?seatType=${seatType}&price=${price}&date=${sp.get('date')}`, {
      state: props
    })
  }

  return (
    <div className={styles.collapseBox}>
      <Collapse
        accordion
        arrowIcon={(active) =>
          active ? (
            <Tag
              className={styles.tag}
              color="#ff6430"
              fill="outline"
            >
              收起
            </Tag>
          ) : (
            <Tag
              className={styles.tag}
              color="#ff6430"
              fill="outline"
            >
              预订
            </Tag>
          )
        }
      >
        {/* 循环生成每个手风琴的 Item 项 */}
        {seatType.map((item, index) => (
          <Collapse.Panel
            key={index}
            title={
              <div className={styles.titleBox}>
                {/* 标题左侧 */}
                <span>
                  <span>{seatTypeCN[index]}</span>
                  <span className={styles.price}>￥{props[item].price}</span>
                </span>
                {/* 标题右侧 */}
                <span>
                  {props[item].ticketNum}
                  {typeof props[item].ticketNum === 'number' ? '张' : ''}
                </span>
              </div>
            }
          >
            <List style={{ '--border-top': 'none', '--border-bottom': 'none' }}>
              <List.Item
                arrowIcon={
                  <Tag
                    className={styles.tag}
                    color="orange"
                    fill="outline"
                    onClick={() =>
                      gotoOrder(seatTypeCN[index], props[item].price)
                    }
                  >
                    买票
                  </Tag>
                }
                description={
                  <span className={styles.desc}>
                    含40元出行保障 快速出票 迅捷无忧
                  </span>
                }
              >
                <span className={styles.title}>快速预订</span>
              </List.Item>
              <List.Item
                arrowIcon={
                  <Tag
                    className={styles.tag}
                    color="orange"
                    fill="outline"
                    onClick={() =>
                      gotoOrder(seatTypeCN[index], props[item].price)
                    }
                  >
                    买票
                  </Tag>
                }
                description={
                  <span className={styles.desc}>出票较慢，高峰期需要排队</span>
                }
              >
                <span className={styles.title}>普通预订</span>
              </List.Item>
            </List>
          </Collapse.Panel>
        ))}
      </Collapse>
    </div>
  )
}

export default TicketCollapse
